<template>
  <div id="" class="ym">
        <myHeader title="联系人">
        </myHeader>
        <div class="yc">
          <ul>
          	<li v-for="(temp,index) in you" @click="toScroll(temp)">{{temp}}</li>
          </ul>
      </div>
        <div class="main" ref="main">
        <div class="ceng" v-for="(vs,index) in msg" >
          <p class="id" :id="vs.id" >{{vs.id}} 	</p>
        <p v-for="(v,i) in vs.shuju" class="data" >
        		<span class="left" @click="toDetail(v)">{{v.name}}</span>
            <a :href="'tel:'+v.tel" class="phone1 icon-phone"></a>
            <span class="right">{{v.tel}}</span>
            </p>
          </div>
</div>


        <myfoot></myfoot>
  </div>
</template>
<script>
import myfoot from "@/components/footer"
import myHeader from "@/components/headerTop"
import {getContact} from "@/API"
import ConverPinyin from "@/until/corvert.js"
export default {
  name: "home",
  data: () => ({
    msg:[],
    you:[]
  }),
  components: {
    myfoot,myHeader
  },
  methods: {
    toDetail(prams) {
      this.$router.push("/detail")
    },
    toScroll(temp){
        var id=document.getElementById(temp);
        var main=this.$refs.main;
        console.log(id.offsetTop)
        main.scrollTop=(id.offsetTop-55)
        //window.scrollTo(0,id.offsetTop-55);
    }
  },
  created(){
    this.$store.commit("changeIshow",{data:true})
    getContact().then(res=>{

          let data=res.dataList;
          console.log(data)
    for(let i=0;i<data.length;i++){
    data[i]["firstWord"]=ConverPinyin(data[i].name).slice(0,1)
    }
    //首字母排序
    data=data.sort(function(a,b){
      return a.firstWord.charCodeAt()-b.firstWord.charCodeAt()
    })
    //把data按照26个英文字母分类
    var data2=[]
    var data1=[]
    var num=0;
    for(let i=0;i<26;i++){
      for(let j=0;j<data.length;j++){
        if(data[j].firstWord.charCodeAt()==Number(97+num)){
          data1.push(data[j])
        }
      }
      data2.push(data1)
      data1=[]
      num++
    }
    //整合成一个数组方便渲染 和点击调转
    var temp=[]
    var youce=[]
    for(let i=0;i<data2.length;i++){
      if(data2[i]==""){}
      else{
    //		console.log(data2[i][0].firstWord)
        youce.push(data2[i][0].firstWord)
    //		console.log(data2[i])
        temp.push({"id":data2[i][0].firstWord,"shuju":data2[i]})
      }
    }
    //	console.log(temp)
    //	console.log(youce)
    this.you=youce
    this.msg=temp

      this.$store.commit("changeIshow",{data:false})
    })
  }

}
</script>
<style  lang="less" scoped>
.ym{width:100%;height:100%;display:flex;flex-direction:column;}
.ym .yc{position:fixed;width:20px;height:100%;right:0;top:1rem;text-align:center;border-left:1px solid grey;box-sizing:border-box;}
.ym .yc ul{width:100%;height:100%;}
.ym .yc ul li{width:100%;height:22px;line-height:22px;box-sizing:border-box;border-bottom:1px solid grey;}
.ym .yc ul li:hover{background:green;color:white;font-weight:bolder;}
.main{
    width: 100%;
    margin-top: 50px;
    height: 100%;
    overflow: scroll;
    .ceng{

      .id{
        height: 30px;
        background: #ccc;
        line-height: 30px;
        padding-left: 25px;
        text-align: left;
      }
      .data{
        height: 35px;
        line-height: 35px;
        width: 100%;

      }

      .left{
        text-align: left;
        float: left;
          padding-left: 25px;
      }
      .right{
        float: right;
        padding-right: 100px;
      }

    }

    .phone1{
      float: right;
      padding-right: 30px;
      line-height: 35px;
    }
}
</style>
